<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
div.well{
  margin:10px;
  background-color: #6DB07A;
}
.well ul li{
    list-style: none;
    text-align: center;
    line-height: 20px;
    color: white;
    font-size: large;
    margin-bottom: 2%;
}
.btn-info{
    margin-left: 90%;
    background-color: #6DB07A;
    border-color: #6DB07A;
}
</style>
<div>
    <a class="btn btn-info" role="button" data-toggle="collapse" href="#dota" aria-expanded="false" aria-controls="collapseExample">
        <img src="./桌游精灵/imgs/菜单.png" alt="">
      </a>
      
      <div class="collapse" id="dota">
        <div class="well">
          <ul>
              <li>首页</li>
              <li>职业</li>
              <li>推荐</li>
              <li>关于</li>
          </ul>
        </div>
      </div>
</div>

 
